<template>
  <div>
    <div class="logo flx-center">
      <img src="@/assets/images/logo.png" alt="logo"/>
      <span v-show="!isCollapse">Dragon Admin</span>
    </div>
    <el-scrollbar class="theme-dark">
      <el-menu 
        :default-active="activeMenu"
        :collapse="isCollapse" 
        :collapse-transition="false"
        :unique-opened="true"
        background-color="#191a20"
        text-color="#bdbdc0"
        active-text-color="#ffffff"
      >
        <sidebar-item
          v-for="(route, index) in menuList"
          :key="route.path  + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
    <!-- {{ menuList }} -->
  </div>
</template>

<script setup>
// import Logo from './Logo';
import SidebarItem from './SidebarItem';
import logo from './Logo'
import { useRoute } from "vue-router";
import { AppStore } from "@/store/modules/app";
import { PermissionStore } from "@/store/modules/permission"
import { computed,ref } from "vue";

const route = useRoute();
const appStore = AppStore();
const permissionStore = PermissionStore()
const isCollapse = computed(() => appStore.sidebar.opened);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path));
const menuList = permissionStore.routes;
</script>
<style lang="less" scoped>
.logo {
  height: 55px;
  box-sizing: border-box;
  img {
    width: 30px;
    margin-right: 6px;
  }
  span {
    font-size: 21px;
    font-weight: bold;
  }
}
.flx-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>